<template>
  <tl-sub-page :render="render" :visible.sync="visible" :title="title" v-dialogDrag width="1100px" top="10px" class="tl-dialog" @open="open" @close="close">
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="120px" :disabled="disableEditSubmit || stateApproval">
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="begintime" :rules="rules.validateRequire">
            <el-date-picker v-model="model.begintime" type="datetime" placeholder="预计开始时间" default-time="09:00:00" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endtime" :rules="rules.validateRequire">
            <el-date-picker v-model="model.endtime" type="datetime" placeholder="预计结束时间" default-time="09:00:00" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议名称" prop="name" :rules="rules.validateRequire">
            <el-input v-model="model.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议室" prop="boardroomid" :rules="rules.validateRequire">
            <tl-ref-item v-model="model.boardroomid" :initDisplayData.sync="model.airlinecompany" :requireModel.sync="queryBoardItemModel" @open="chooseBoardItem" @updateRequire="updateRequire"></tl-ref-item>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="会议内容" prop="boardcontent">
            <el-input v-model="model.boardcontent" type="textarea" :rows="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="会议等级" prop="sourcelevel" :rules="rules.validateRequire">
            <el-radio-group v-model="model.sourcelevel" @change="chooseSourceLevel">
              <el-radio-button v-for="item in codeModel.sourcelevelList" :key="item.code" :label="parseInt(item.code)">{{ item.name }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="会议配置">
            <el-checkbox-group v-model="selectedSourceList">
              <el-checkbox v-for="item in allSourceList" :key="item.id" :label="item.id.toString()">
                <span :class="{ red: item.state !== 1 }">{{ item.state !== 1 ? item.name + '(缺货)' : item.name }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="其他配置" prop="preparerequest">
            <el-input v-model="model.preparerequest" type="textarea" :rows="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="会务服务">
            <el-checkbox-group v-model="selectedService" @change="doSelectService">
              <el-checkbox v-for="item in serviceList" :key="item.code" :label="item.code.toString()">
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="service.welcomevisiable">
        <el-col :span="12">
          <el-form-item label="欢迎屏内容" prop="welcomeinfo" :rules="rules.validateRequire">
            <el-input v-model="model.welcomeinfo" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示时间" prop="welcometime" :rules="rules.validateRequire">
            <el-input v-model="model.welcometime" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="service.signvisiable || service.teavisiable">
        <el-col :span="12" v-if="service.signvisiable">
          <el-form-item label="桌签内容" prop="signinfo" :rules="rules.validateRequire">
            <el-input v-model="model.signinfo" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="service.teavisiable">
          <el-form-item label="茶歇服务" prop="teainfo" :rules="rules.validateRequire">
            <el-input v-model="model.teainfo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="service.othervisiable">
        <el-col :span="24">
          <el-form-item label="其他" prop="otherservice" :rules="rules.validateRequire">
            <el-input v-model="model.otherservice" type="textarea" :rows="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议主持人" prop="hostusercode">
            <tl-ref-user v-model="model.hostusercode" :initDisplayData.sync="model.disphostusercode" dataType="code" :singleSelect="true"></tl-ref-user>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="'内部参会(' + innerPeopleCount + '人)'" prop="partinneruser">
            <tl-ref-user v-model="model.partinnerusercode" :initDisplayData.sync="model.partinnerusername" dataType="code"></tl-ref-user>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="外部参会人" prop="partouteruser">
            <el-input v-model="model.partouteruser" type="textarea" :rows="1" />
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="审批流程" prop="flowid">
            <el-select v-model="model.flowid">
              <el-option v-for="item in codeModel.flowList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="telephone" :rules="rules.validateRequire">
            <el-input v-model="model.telephone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider>
        <el-link :icon="displayMore ? 'el-icon-upload2' : 'el-icon-download'" type="primary" @click="displayMore = !displayMore">{{ displayMore ? '收起' : '更多信息' }}</el-link>
      </el-divider>
      <el-row v-show="displayMore">
        <el-col :span="12">
          <el-form-item label="申请人" prop="username">
            <el-input v-model="model.username" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工号" prop="usercode">
            <el-input v-model="model.usercode" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="displayMore">
        <el-col :span="12">
          <el-form-item label="公司" prop="orgcode">
            <el-input v-model="model.disporgcode" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门" prop="deptcode">
            <el-input v-model="model.dispdeptcode" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <tl-approval-history ref="history" sourceType="ToaBoardroomApply" :sourceId="model.id" />
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="!disableEditSubmit" :disabled="disableSave"><svg-icon icon-class="save" />保存</el-button>
      <el-button type="primary" @click="doSubmitApproval" :loading="submitLoading" v-if="!disableEditSubmit" :disabled="disableApproval"><svg-icon icon-class="send" />提交审批</el-button>
      <!-- <tl-attachment sourceType="ToaBoardroomApply" :sourceId="model.id"></tl-attachment> -->
      <el-button type="primary" @click="$refs.history.visible = true" :disabled="disableApprovalHistory"><svg-icon icon-class="list" />审批历史</el-button>
      <!-- <el-button type="primary" @click="doDelApproval" :loading="delApprovalLoading" v-if="!disableEditSubmit" :disabled="disableDelApproval"><svg-icon icon-class="undo" />取消审批</el-button> -->
    </div>
  </tl-sub-page>
</template>

<script>
/** mixins */
import { queryDataCode } from '@tapui/api/dataCode'
import { mixin_approval_edit } from '@tapui/mixins/mixin_approval_edit'
import { getInfo } from '@tapui/api/login'
import { putAction, getAction, postAction } from '@tapui/utils/http'
/** 子组件 */
import tlRefItem from '../boardroomItem/ref'
export default {
  components: { tlRefItem },
  mixins: [mixin_approval_edit],
  data() {
    return {
      moduleTitle: '会议室申请',
      url: {
        add: '/toa/boardroomApply/insert',
        edit: '/toa/boardroomApply/update',
        load: '/toa/boardroomApply/load',
        submit: '/toa/boardroomApply/submit',
        delApproval: '/toa/boardroomApply/delApproval',
        queryCodeList: '/toa/boardroomApply/dataCodeList',
        queryDeptTree: '/cbo/dept/queryTreeList',
        queryDeptList: '/cbo/dept/list',
        queryUserInfo: '/cbo/user/load',
        queryBoardroomSourceList: '/toa/boardroomSource/list'
      },
      // 会议室资源可选列表
      allSourceList: [],
      selectedSourceList: [],
      queryBoardItemModel: {
        begintime: '',
        endtime: '',
        count: 0,
        sourcelist: []
      },
      selectedService: [],
      serviceList: [
        { code: 'welcomevisiable', name: '欢迎屏准备' },
        { code: 'signvisiable', name: '桌签准备' },
        { code: 'teavisiable', name: '茶歇准备' },
        { code: 'othervisiable', name: '其他' }
      ],
      service: {
        welcomevisiable: false,
        signvisiable: false,
        teavisiable: false,
        othervisiable: false
      },
      displayMore: false
    }
  },
  computed: {
    innerPeopleCount() {
      if (this.model.partinnerusercode) {
        return this.model.partinnerusercode.split(',').length
      } else {
        return 0
      }
    },
    // 禁用取消审批
    disableDelApproval() {
      return this.stateAdd || this.stateEdit
    }
  },
  methods: {
    queryUserInfo(userList) {
      if (userList && userList.length > 0) {
        getAction(this.url.queryUserInfo, { id: userList[0].id }).then(data => {
          if (data.success) {
            this.$set(this.model, 'telephone', data.result.mobile)
          }
        })
      }
    },
    chooseBoardItem() {
      this.queryBoardItemModel.begintime = this.model.begintime
      this.queryBoardItemModel.endtime = this.model.endtime
      this.queryBoardItemModel.count = this.innerPeopleCount
      this.queryBoardItemModel.sourcelist = this.selectedSourceList
    },
    doSelectService() {
      Object.keys(this.service).forEach(key => {
        if (this.selectedService.includes(key)) {
          this.service[key] = true
        } else {
          this.service[key] = false
          if (key === 'welcomevisiable') {
            this.$set(this.model, 'welcomeinfo', '')
            this.$set(this.model, 'welcometime', '')
          }
          if (key === 'signvisiable') {
            this.$set(this.model, 'signinfo', '')
          }
          if (key === 'teavisiable') {
            this.$set(this.model, 'teainfo', '')
          }
          if (key === 'othervisiable') {
            this.$set(this.model, 'otherservice', '')
          }
        }
      })
    },
    updateRequire(requireModel) {
      this.queryBoardItemModel = requireModel
      this.$set(this.model, 'begintime', this.queryBoardItemModel.begintime)
      this.$set(this.model, 'endtime', this.queryBoardItemModel.endtime)
      this.selectedSourceList = this.queryBoardItemModel.sourcelist
    },
    chooseSourceLevel() {
      this.selectedSourceList = []
      for (let item of this.allSourceList) {
        let a = item.sourcelevellist + ','
        if (a.indexOf(this.model.sourcelevel + ',') > -1) {
          this.selectedSourceList.push(item.id.toString())
        }
      }
    },
    beforeSubmit() {
      this.model.sourcelist = this.selectedSourceList.join(',')
      return true
    },
    loaded() {
      if (this.model.sourcelist) {
        this.selectedSourceList = this.model.sourcelist.split(',')
      } else {
        this.selectedSourceList = []
      }
      this.selectedService = []
      if (this.model.welcomeinfo) {
        this.selectedService.push('welcomevisiable')
      }
      if (this.model.signinfo) {
        this.selectedService.push('signvisiable')
      }
      if (this.model.teainfo) {
        this.selectedService.push('teavisiable')
      }
      if (this.model.otherservice) {
        this.selectedService.push('otherservice')
      }
      this.doSelectService()
    },
    assignDefaultValue() {
      if (this.isAdd) {
        if (this.codeModel.flowList.length > 0) this.$set(this.model, 'flowid', parseInt(this.codeModel.flowList[0].id))
        this.$set(this.model, 'orgcode', this.org.code)
        this.$set(this.model, 'disporgcode', this.org.name)
        this.$set(this.model, 'deptcode', this.dept.code)
        this.$set(this.model, 'dispdeptcode', this.dept.fullname)
        this.$set(this.model, 'usercode', this.user.code)
        this.$set(this.model, 'username', this.user.name)
        this.$set(this.model, 'telephone', this.user.mobile)
        this.$set(this.model, 'hostusercode', this.user.code)
        this.$set(this.model, 'disphostusercode', this.user.name)
      }
      getAction(this.url.queryBoardroomSourceList, {
        sidx: 'sortcode',
        sord: 'asc',
        currentPage: 1,
        pageSize: 9999,
        qry_enabled: 1
      }).then(data => {
        if (data.success) {
          this.allSourceList = data.result.dataList
        }
      })
    }
  }
}
</script>

<style scoped>
.red {
  color: red;
}
</style>
